@use 'variables' as *;

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
	color-scheme: light;

	@include breakpoint('large') {
		font-size: 55%;
	}
}

body,
a,
code,
.form textarea,
.table-header td span,
#carbonads .carbon-responsive-wrap,
#carbonads .carbon-via {
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

body {
	font-size: 1.8rem;
	line-height: 1.618;
	font-family: $brand-font;
	font-weight: normal;
	text-align: center;
	color: $black;

	&.modal-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}
}

a {
	color: $black;
	text-decoration: none;
	border-bottom: 3px solid $black;

	&:hover,
	&:active {
		border-color: $magenta;
	}
}

code {
	background: $gray-100;
	font-size: 85%;
	padding: .2rem .6rem;
	border-radius: $radius;
}

pre {
	font-family: $monospace;
}

.header {
	display: flex;
	justify-content: center;
	padding: 6rem 2rem 8rem;
	margin: auto;

	@include breakpoint('large') {
		padding: 10rem 2rem 6rem;
	}

	.preface {
		position: absolute;
		top: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		left: 0;

		.dark-mode-selector {
			position: relative;
			top: 2rem;
			left: 2rem;

			.theme-toggle {
				background: $gray-50;
				border: none;
				cursor: pointer;
				position: relative;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 1rem;
				padding: 1.5rem;
				border-radius: 50%;

				&-icon {
					display: inline-flex;
					align-items: center;
					justify-content: center;

					svg {
						width: 2.2rem;
						height: 2.2rem;
						color: $black;
					}

					.icon-tabler-sun-high {
						display: none;
					}

					.icon-tabler-moon {
						display: inline-block;
					}
				}
			}
		}

		a.github-corner {
			border: none;
			display: flex;
			fill: $black;
			color: $white;

			&:hover .octo-arm {
				animation: octocat-wave 560ms ease-in-out;

				@include breakpoint('medium') {
					animation: none;
				}
			}

			.octo-arm {
				@include breakpoint('medium') {
					animation: octocat-wave 560ms ease-in-out;
				}
			}
		}
	}

	h1 {
		margin: 0;
		position: relative;
		z-index: 1;

		a {
			background: linear-gradient(to right, $orange, $magenta);
			border-radius: $radius;
			margin-bottom: 0;
			font-size: 5.6rem;
			font-weight: 900;
			line-height: 1.1;
			color: $white;
			text-decoration: none;
			border: none;
			padding: 1rem 3.2rem;
			display: flex;
			width: 100%;

			@include breakpoint('medium') {
				font-size: 4.8rem;
				padding: 1rem 1.5rem;
			}

			@include breakpoint('small') {
				font-size: 3.6rem;
			}
		}
	}
}

.main {
	margin: 0 auto 10rem;
	padding: 0 2rem;
	max-width: 85rem;
}

.form {

	form {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	&-labels {
		position: relative;
		display: flex;
		justify-content: center;

		.textarea-label {
			font-weight: normal;
			font-size: 2.4rem;
			line-height: 1.3;

			@include breakpoint('small') {
				font-size: 2rem;
			}
		}

		.form-warning {
			opacity: 0;
			visibility: hidden;
			background: $alert;
			color: $white;
			position: absolute;
			bottom: -1rem;
			font-size: 2rem;
			line-height: 2.4rem;
			display: block;
			pointer-events: none;
			padding: .75rem 1.5rem;
			border-radius: $radius;
			transition: opacity 200ms linear, bottom 250ms ease-out, visibility 0s linear 250ms;
			z-index: 1;

			&:after {
				content: "";
				position: absolute;
				left: calc(50% - 1rem);
				margin-top: 1.5rem;
				width: 2rem;
				height: 2rem;
				transform: rotate(45deg);
				background: $alert;
				z-index: -1;
			}

			&.visible {
				opacity: 1;
				visibility: visible;
				bottom: .2rem;
				pointer-events: auto;
				transition: opacity 200ms linear, bottom 250ms ease-out, visibility 0s;
			}
		}
	}

	&-input {
		display: flex;
		max-width: 54rem;
		margin: 1rem auto 2rem;
		width: 100%;
		position: relative;

		textarea {
			padding: 1.6rem;
			min-height: 24rem;
			background: $gray-50;
			border: 1px solid $gray-200;
			word-spacing: .25rem;
			border-radius: $radius;
			resize: none;
			width: 100%;
			font-family: $monospace;

			@media (pointer: coarse) {
				font-size: 16px;
			}
		}
	}

	.make-button {
		padding: 1.6rem;
		width: 100%;
		max-width: 54rem;
		border: none;
		background: $black;
		color: $white;
		border-radius: $radius;
		line-height: inherit;
		cursor: pointer;
		font-size: 2rem;
		font-weight: 400;
		transition: background 150ms ease-in-out;

		&:hover,
		&:active {
			background: $magenta;
		}
	}

	.color-picker-wrapper {
		position: absolute;
		right: 1.2rem;
		bottom: 1.2rem;
		z-index: 2;
		width: 4.8rem;
		height: 4.8rem;

		.color-picker-button {
			width: 100%;
			height: 100%;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			border: none;
			border-radius: 50%;
			background: $white;
			color: $black;
			box-shadow: $shadow-main;
			cursor: pointer;
			transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;

			svg {
				width: 2.2rem;
				height: 2.2rem;
				display: flex;
			}

			&:active {
				transform: scale(.9);
				opacity: .75;
			}
		}

		.color-picker-input {
			position: absolute;
			inset: 0;
			opacity: 0;
			pointer-events: none;
			border: none;
			padding: 0;
		}
	}
}

.copy-indicator {
	display: grid;
	place-items: center;
	position: absolute;
	pointer-events: none;
	transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
	will-change: opacity, transform;
	color: $black;
	inset: 0;

	svg {
		width: 2rem;
		height: 2rem;
	}

	&-check {
		color: $success;

		svg {
			width: 2.8rem;
			height: 2.8rem;
		}
	}
}

#clr-picker {
	box-shadow: $shadow-main;

	input.clr-color {
		border-color: $gray-200;
		background-color: $gray-50;
		font-family: $monospace;
	}
}

.palettes {
	margin-top: 6rem;

	.palette-controls-wrapper {
		margin-bottom: 2.5rem;

		&[hidden] {
			display: none !important;
		}

		.palette-controls {
			display: flex;
			justify-content: flex-start;
			gap: 1.2rem;

			.step-selector {
				display: flex;

				&-option {
					border: none;
					width: 4.5rem;
					background: $gray-50;
					color: $black;
					padding: 0;
					font-size: 1.6rem;
					font-weight: 500;
					cursor: pointer;

					&.is-active {
						background: $gray-200;
					}

					&:not(.is-active):hover,
					&:not(.is-active):active {
						background: $gray-100;
					}

					&:first-child {
						border-radius: $radius 0 0 $radius;
					}

					&:last-child {
						border-radius: 0 $radius $radius 0;
					}
				}
			}

			.action-button {
				border: none;
				border-radius: $radius;
				padding: 1rem;
				cursor: pointer;
				background: $gray-50;
				color: $black;
				display: inline-flex;

				.icon {
					width: 2rem;
					height: 2rem;
				}

				&:hover,
				&:active {
					background: $gray-100;
				}

				&-toggle.is-active {
					background: $gray-200;
				}
			}

			.exports {
				margin-left: auto;
				display: inline-flex;
				gap: 1.2rem;
			}
		}
	}

	#tints-and-shades {
		overflow-x: auto;
		width: 100%;
		outline: 0;

		table {
			width: 100%;
			border-collapse: collapse;

			.table-header td {
				font-size: 1.3rem;
				min-width: 6.5rem;
				padding: 0 0 1.5rem;
				font-weight: 500;

				@include breakpoint('large') {
					font-size: 12px;
				}
			}

			.palette-name-row td {
				text-align: left;
				padding: 0 0 .25rem 0;
				font-size: 1.3rem;
				font-weight: 500;
				color: $black;
			}

			td.hex-value {
				font-size: 1.3rem;
				text-align: center;
				padding: .5rem 0 2rem;
				font-family: $monospace;
				text-transform: lowercase;

				@include breakpoint('large') {
					font-size: 12px;
				}
			}

			td.hex-color {
				height: 6.5rem;
				min-width: 7.5rem;
				cursor: pointer;
				position: relative;
				outline: 0;
				overflow: hidden;

				&.copy-locked {
					pointer-events: none;
				}

				.copy-indicator {
					height: 4rem;
					width: 4rem;
					opacity: 0;
					border-radius: $radius;
					box-shadow: $shadow-main;
					background-color: $white;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -45%);

					&-check {
						transform: translate(-50%, -50%);
						opacity: 0;
						transition: opacity 150ms ease;
					}
				}

				&:hover .copy-indicator-copy,
				&:focus-visible .copy-indicator-copy,
				&:hover .copy-indicator-picker,
				&:focus-visible .copy-indicator-picker,
				&.is-picker-open .copy-indicator-picker {
					opacity: 1;
					transform: translate(-50%, -50%);
				}

				&:not(.copied):active .copy-indicator-copy,
				&:not(.copied):active .copy-indicator-picker {
					opacity: .75;
					transform: translate(-50%, -50%) scale(.9);
				}

				&.copied {
					.copy-indicator-check {
						opacity: 1;
						color: $success;
					}

					.copy-indicator-copy {
						opacity: 0;
					}
				}

				@media (pointer: coarse) {
					.copy-indicator-copy {
						display: none;
					}
				}

				&.hex-color-picker {
					svg {
						width: 2.2rem;
						height: 2.2rem;
					}
				}
			}
		}
	}
}

.export-dialog {
	position: relative;
	width: min(50rem, 100vw);
	max-height: 60rem;
	border: 1px solid $gray-200;
	border-radius: $radius;
	padding: 1.6rem;
	box-shadow: 0 20px 70px rgba(0, 0, 0, .25);
	background: $white;
	color: $black;
	overflow: hidden;
	transform-origin: center;

	.export-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2rem;

		h3 {
			margin: 0;
			font-size: 2rem;
			font-weight: 500;
		}
	}

	.export-close {
		border: none;
		background: transparent;
		font-size: 3.2rem;
		cursor: pointer;
		color: $gray-500;
		width: 4rem;
		height: 4rem;
		padding: 0;
		position: relative;
		right: -1rem;
		font-weight: 500;
		user-select: none;
	}

	.export-tabs {
		display: flex;
		z-index: 1;

		.export-tab {
			background: transparent;
			color: $gray-400;
			padding: .8rem 1.6rem;
			cursor: pointer;
			font-weight: 500;
			border: 1px solid transparent;
			border-radius: $radius $radius 0 0;
			border-bottom: none;
			font-size: 1.6rem;
			user-select: none;

			&.is-active {
				color: $black;
				background-color: $gray-50;
			}
		}
	}

	.export-body {
		display: flex;
		flex: 1 1 auto;
		min-height: 0;

		.export-output-wrap {
			position: relative;
			flex: 1 1 auto;
			display: flex;
			min-height: 0;

			.export-output {
				margin: 0;
				padding: 1.6rem;
				flex: 1 1 auto;
				font-size: 1.4rem;
				line-height: 1.5;
				text-align: left;
				border-radius: $radius;
				background: $gray-50;
				overflow: auto;
				white-space: pre-wrap;
				word-break: break-word;

				&.is-first-tab-active {
					border-radius: 0 $radius $radius $radius;
				}
			}
		}
	}

	.export-copy {
		position: absolute;
		right: 3rem;
		bottom: 3rem;

		.export-copy-button {
			width: 5rem;
			height: 5rem;
			padding: 0;
			border-radius: 50%;
			border: none;
			background: $white;
			color: $black;
			cursor: pointer;
			box-shadow: $shadow-main;
			transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.copy-indicator-copy {
				opacity: 1;
				transform: scale(1);
			}

			.copy-indicator-check {
				opacity: 0;
				transform: scale(1.2);
			}

			&:active {
				opacity: .75;
				transform: scale(.9);
			}

			&[disabled] {
				pointer-events: none;
			}

			&.copied {
				background: $white;
				color: $black;

				.copy-indicator-copy {
					opacity: 0;
					transform: scale(.8);
				}

				.copy-indicator-check {
					opacity: 1;
					transform: scale(1);
				}
			}
		}
	}

	&:not([open]) {
		display: none;
	}

	&[open] {
		display: flex;
		flex-direction: column;
		height: 90vh;
	}

	&::backdrop {
		background: rgba(0, 0, 0, .5);
		opacity: 1;
	}

	&.is-opening {
		animation: export-dialog-fade 180ms ease-out forwards;

		&::backdrop {
			animation: export-backdrop-fade 180ms ease-out forwards;
		}
	}

	&.is-closing {
		animation: export-dialog-fade 150ms ease-in reverse forwards;

		&::backdrop {
			animation: export-backdrop-fade 150ms ease-in reverse forwards;
		}
	}
}

.footer ul {
	list-style: none;
	display: flex;
	gap: 4rem;
	justify-content: center;
	padding: 0;
	margin: 0 0 8rem;
}

.sr-only,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {

	&:focus,
	&:focus-visible {
		top: 1rem;
		left: 1rem;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		display: inline-block;
		padding: 1rem 2rem;
		border-radius: $radius;
		color: $white;
		background-color: $black;
		z-index: 1;
		transition: none;
	}
}

@keyframes octocat-wave {

	0%,
	100% {
		transform: rotate(0deg);
	}

	20%,
	60% {
		transform: rotate(-25deg);
	}

	40%,
	80% {
		transform: rotate(10deg);
	}
}

@keyframes export-dialog-fade {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes export-backdrop-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.export-dialog.is-opening,
	.export-dialog.is-closing,
	.export-dialog.is-opening::backdrop,
	.export-dialog.is-closing::backdrop {
		animation: none;
	}
}

.docs {
	text-align: left;

	h2 {
		margin: 4rem 0 0;
		font-size: 2.7rem;
		line-height: 1.3;
		font-weight: bold;

		&:first-child {
			margin-top: 0;
		}
	}

	h3 {
		margin: 2rem 0 0;
	}

	p,
	ul,
	ol {
		margin: 1.5rem 0;
	}

	li {
		margin-bottom: .5rem;
	}

	.anchorjs-link {
		border: none;

		&:hover {
			color: $magenta;
		}
	}
}

.not-found {
	background: $gray-50;
	color: $black;
	display: inline-block;
	padding: 4rem 8rem;
	border-radius: $radius;

	h2 {
		font-weight: 900;
		font-size: 6rem;
		line-height: 1;
		margin: 0;
	}
}